There’s one more animation property I’d like to explore here and that’s animation-direction. So far, our animations have only played forwards which has worked out pretty well. But we do have other options – very useful options at that! The setting for animation-direction can be normal, reverse, alternate and alternate-reverse. These sound like a bit of a mouthful, but they make much more sense when you see them in action.
The default setting is normal and plays forwards through your listed keyframe declarations for every iteration of your animation. We’ve got that one down pat.

body {margin: 4em 10%; background:#333;}
                
.ball {
 animation-name: ballmove;
    animation-duration: 3s;
    animation-timing-function: ease-in;
}
            
@keyframes ballmove {
    0% {transform: translateX(100px) rotate(0);}
    100% {transform:translateX(450px) rotate(2turn);}            
}

The setting reverse plays your animation in the reverse order of your keyframe listing, as though you were rewinding it. Set the direction to reverse and our ball now goes from right to left instead of left to right.

You can use alternate only if your animation has an iteration-count of more than one. The first time it plays, it will play normally; the second time through it will reverse; then forwards; then reverse… alternating the direction, starting with forwards, until the iteration-count runs out.

Finally, alternate-reverse works just like alternate, except that it starts with reverse instead of forwards. With alternate-reverse set, our ball alternates direction on each iteration of the animation just like last time, but it starts with a reverse iteration instead of a normal one.

If you have a keen eye you may also notice that our animation-timing-function is also reversed each time the animation direction is reversed. That’s a nice built-in touch of CSS animations.
Even with just these simple examples, I’m sure you can see how useful the additional properties can be for creating even more interesting effects with your CSS animations.

Shorthand

Yes, you can assign your animation properties using shorthand. Thank goodness for that! An animation defined with the animation shorthand property might look something like this:

animation: myAnimation 1s ease-in-out 2s 4;

That is, animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count>.

You may notice that the order of the shorthand varies across examples you’ll see online, though they all work just fine. In this particular shorthand, the order of similar terms (such as number values for duration and delay) appears to be more important than the overall order.

The W3C currently defines the shorthand order like this:

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

To define multiple animations on one element using the shorthand, you need to separate the values for each animation with a comma. So an element with two animations applied to it would look something like this:

animation: myAnimation 1s ease-in-out 2s 4, myOtherAnimation 4s ease-out 2s;